<template>
  <div class="box">
    <div class="chart_box">
      <v-chart :options="options" autoresize @click="clickChart"/>
    </div>
  </div>
</template>

<script>
import { color } from 'echarts'


function formatterBgc(type) {
  let val = ''
  if (type == 1) {
    val = '#f00'
  } else if (val == 2) {
    val = 'blue'
  } else {
    val = 'ff3c20'
  }

  return val
}

export default {
  name: "Tree",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    ispreview: Boolean,
    isShowUnit: true
  },
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [],
            top: '1%',
            left: '5%',
            bottom: '1%',
            right: '40%',
            roam: false,
            // 圈 大小
            symbol: 'none',
            symbolSize: 60, // [100, 50]
            // 折线
            edgeShape: 'polyline',
            orient: 'vertical',
            edgeForkPosition: '50%',
            initialTreeDepth: 10,
            orient: 'LR',
            layout: 'orthogonal',
            lineStyle: {
              width: 1,
              color: '#E4CFBB',
              curveness: 10,
            },
            itemStyle: {
              borderCap: 'square',
              borderJoin: 'miter',
              borderRadius: 10
            },
            label: {
              width: 400,
              show: true,
              color: '#000',
              // backgroundColor: '#fff',
              position: '',
              distance: 10,
              // overflow: 'break',
              verticalAlign: 'middle',
              align: 'left',
              formatter: function(params) {
                return '{title|' + params.name + '}'
              },
              // backgroundColor: 'rgb(39, 178, 237)', //标签背景颜色
              borderColor: 'none',  //外层边框颜色
              borderWidth: 1, //外层边框宽度
              borderRadius: 4, //外层边框圆角
              // padding: 5,
              rich: {
                title: {
                  width: '100%',
                  height: 10,
                  // backgroundColor: 'rgb(39, 178, 237)',
                  color: '#fff',
                  align: 'left',
                  fontSize: '16px',
                  padding: 2,
                  borderRadius: [3, 3, 0, 0],
                  // display: 'flex',
                  // flexDirection: 'column',
                  // justifyContent: 'space-between'
                },
              }
            },
            labelLayout: {
              hideOverlap: false
            },
            emphasis: {
              focus: 'descendant'
            },
          }
        ]
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.options.series[0].data = val
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    clickChart(params) {
      let obj = {
        townName: params.treeAncestors[1].name,
        villageName: params.treeAncestors[2].name
      } 
      this.$emit('emitChartParams', obj)
    }
  }
};
</script>

<style scoped lang="less">
.s { color: #83d7f0; }
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.unit { position: absolute; left: 10px; bottom: 0px; color: #fff; font-size: 14px; }
</style>
